<template>
    <div id="big">
        <div class="round">
            <ul class="much">
                <li class="num">{{integral}}</li>
                <li class="text">砍币</li>
            </ul>
            <div class="btn" @click="goCutCoin">
                我的砍币
            </div>
        </div>
        <div class="change">
            <span @click="handleClick" :class="flag==1?'active':''">兑换专区</span>
            <span @click="handleSpan" :class="flags==1?'active':''">兑换记录</span>
        </div>
        <!-- ---------------------------- 兑换专区内容 ---------------------------- -->

        <div class="coupon" v-if="show">
            <div class="area" v-for="(x,y) in changeList">
                <div class="one">
                    <img :src="x.type==1?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/full_coupons.png':''">
                </div>
                <ul class="center"><!---->
                    <li class="icon">
                        ¥ <span class="how">{{x.min_price}}</span> 满{{x.max_price}}元可用
                    </li>
                    <li class="cLi">{{x.title}}</li>
                    <li class="days">{{x.life}}</li>
                </ul>

                <ul class="right">
                    <li class="money">{{x.integral}}砍币</li>
                    <li class="huan" @click="huanD" :id="x.id">兑换</li>
                </ul>
            </div>

        </div>

        <!-- ----------------------------兑换记录内容----------------------------  -->
        <div class="record" v-if="record" v-for="x in recordList" :id="x.id">
            <ul class="repeat">
                <li class="howMuch">{{x.min_price}}元优惠券</li>
                <li class="times">{{x.time | timeSerialize}}</li>
            </ul>
            <h1 style="color:#646464; font-weight: normal;">{{x.integral}}</h1>
        </div>
        <!-- ----------------------------兑换记录内容----------------------------  -->
        <div class="opaction" v-if="opaction" @click="goBack"></div>
        <div class="textOpac" v-if="textopac">
            <p>确定要兑换此优惠券</P>
            <div class="sBtn">
                <button  @click="canael">取消</button>
                <button  @click="sure">确定</button>
            </div>
        </div>
        <div class="context" v-if="successD">
            <p>{{textNorth}}</p>
        </div>
    </div>

</template>

<script>
    import config from "../config/config.js";
    import store from "../store/newStore.js";
    import share from "../share/share.js";
    import MtaH5 from 'mta-h5-analysis';
    export default{
        data(){
            return{
                flag:1,
                flags:0,
                show:true,
                record:false,
                opaction:false,
                textopac:false,
                changeList:[],
                recordList:[],
                integral:"",
                id:'',
                textNorth:'',
                successD:false
            }
        },
        computed:{
            ticket(){
                return this.$store.state.getTicket;
            }
        },
        activated(){
            share({});
            var value=JSON.stringify({"token":localStorage.getItem('token')}),
                key=demo(value);
            axios.post('/Home/Integral/ShowIntegralExchange',{
                    value:value,
                    key:key,
                    ticket:this.ticket
            },config)
                .then(function(response) {
                    if(response.data.code==200){
                        this.integral=response.data.data.integral;
                        this.changeList=response.data.data.changeList;
                        this.$store.commit('increment',response.data.ticket);
                    }
                }.bind(this))
                .catch(function (error) {
                    console.log(error);
                });
            MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
            MtaH5.pgv();
        },
        methods:{
            handleClick(){
                this.flag = 1,
                    this.flags = 0,
                    this.show = true,
                    this.record = false
            },
            handleSpan(){
                    this.flag = 0,
                    this.flags = 1,
                    this.show = false,
                    this.record = true,
                    this.ShowIntegralExchange();
            },
            goCutCoin(){
                this.$router.push("/cutCoin")
            },
            goBack(){
                this.opaction = false,
                this.textopac = false
            },
            canael(){
                this.opaction = false,
                  this.textopac = false
            },
            huanD($event){
                this.id=$event.currentTarget.getAttribute('id');
                this.opaction = true;
                this.textopac = true;
            },
            sure(){
                var value=JSON.stringify({"id":this.id,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Integral/IntegralExchange',{
                        value:value,
                        key:key,
                        ticket:this.ticket
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            //兑换成功
                            var that=this;
                            this.integral=response.data.data.integral;
                            this.textopac = false;
                            that.opaction = true;
                            that.textNorth='兑换成功';
                            that.successD=true;
                            setTimeout(function(){
                                that.opaction = false;
                                that.successD=false;
                            },1000)

                        }else{
                            //兑换成功
                            var that=this;
                            this.textopac = false;
                            that.textNorth='砍币不足';
                            that.opaction = true;
                            that.successD=true;
                            setTimeout(function(){
                                that.opaction = false;
                                that.successD=false;
                            },1000)
                        }
                        this.$store.commit('increment',response.data.ticket);
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            ShowIntegralExchange(){
                var value=JSON.stringify({"type":1,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Integral/ShowIntegralExchange',{
                        value:value,
                        key:key,
                        ticket:this.ticket
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            this.recordList=response.data.data.recordList;
                            this.$store.commit('increment',response.data.ticket);
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        filters:{
            timeSerialize:function(val){
                return getMyDate(parseInt(val)*1000);
            }
        },
    }
</script>
<style >

</style>